import {designPage} from "plain-design-composition";
import {PlButton, Plc, PlcDate, PlcTextarea, PlIcon, PlTablePro, PlTooltip, useDialog, useMessage, useTableOption} from "plain-design";
import React from "react";
import {MicroLibService} from "@/micro/utils/MicroLibService";
import {$http} from "@/http/http";

export default designPage(() => {

    const $message = useMessage()
    const $dialog = useDialog()

    const option = useTableOption({
        title: 'CMS内容管理',
        url: '/cms',
        fill: true,
        sort: {field: 'createdAt', desc: true},
        enable: {
            update: false,
            insert: false,
        },
        buttons: [
            {
                type: 'delete',
                label: '删除历史数据',
                position: 'out',
                code: 'cms-insert',
                seq: 10,
                render: (() => {
                    const keepNum = 200
                    // const keepNum = 5
                    const clear = async () => {
                        const {list} = await $http.post('/cms/list', {all: true, orders: {field: 'createdAt', desc: 'desc'}})
                        const deleteList: any[] = list.slice(keepNum)
                        if (deleteList.length === 0) {
                            return $message.primary(`当前历史数据不超过${keepNum}条`)
                        }
                        await $http.delete('/cms', {data: {id: deleteList.map(i => i.id)}})
                        $message.success(`已经删除 ${deleteList.length} 条数据！`)
                        option.pageMethods.reload()
                    }
                    return () => (<PlTooltip title={`保留最近${keepNum}条数据`}><PlButton label="删除历史数据" onClick={clear}/></PlTooltip>)
                })(),
            },
            {
                type: 'other',
                label: '新建',
                position: 'out',
                code: 'cms-insert',
                seq: 0,
                handler: () => {
                    window.open(`http://martsforever-pot.gitee.io/react-cms-visual-editor`)
                },
            },
            {
                type: 'other',
                label: '编辑',
                position: 'in',
                code: 'cms-edit',
                seq: 0,
                handler: (node) => {
                    const row = node.data
                    window.open(`http://martsforever-pot.gitee.io/react-cms-visual-editor/?code=${row.id}`)
                },
            },
            {
                type: 'other',
                label: '预览',
                position: 'in',
                code: 'cms-preview',
                seq: 5,
                handler: async (node) => {

                    // http://1.116.13.72:4001/nuxt-vue/?code=51fd920e-88c3-11ec-8add-525400138871
                    // http://1.116.13.72:4002/next-react?code=51fd920e-88c3-11ec-8add-525400138871

                    const row = node.data
                    const AraleQrcode = await MicroLibService.load('AraleQrcode')
                    const url = `http://martsforever-pot.gitee.io/react-cms-visual-editor/preview.html?code=${row.id}`
                    const Result = new AraleQrcode({render: "svg", text: url, size: 120})

                    const openInNuxt = () => window.open(`http://1.116.13.72:4001/nuxt-vue/?code=${row.id}`)
                    const openInNext = () => window.open(`http://1.116.13.72:4002/next-react?code=${row.id}`)

                    $dialog({
                        title: '预览',
                        render: () => (
                            <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}>
                                <PlButton
                                    onClick={() => window.open(url)}>
                                    <span>新窗口预览</span>
                                    <PlIcon icon="el-icon-right"/>
                                </PlButton>
                                <p>扫码预览</p>
                                <div dangerouslySetInnerHTML={{__html: Result.outerHTML}}/>
                                <div style={{width: '100%', marginTop: '40px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'flex-end'}}>
                                    <div>当前预览为客户端渲染预览</div>
                                    <div>请点击下方链接查看服务端渲染效果</div>
                                    <ul style={{padding:'0 16px'}}>
                                        <li>
                                            <PlButton mode="text" label="在NuxtVue3服务端渲染中预览" onClick={openInNuxt}/>
                                        </li>
                                        <li>
                                            <PlButton mode="text" label="在NextReact服务端渲染中预览" onClick={openInNext}/>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        ),
                        cancelButton: true,
                        cancelButtonText: '关闭'
                    })
                },
            }
        ],
    })

    return () => <>
        <div style={{height: '100%', boxSizing: 'border-box', backgroundColor: 'white'}}>
            <PlTablePro option={option}>
                <Plc title="编号" field="id"/>
                <PlcDate title="时间" field="createdAt" editable={false} width={180}/>
                <PlcTextarea title="备注" field="remarks" fit/>
                <PlcTextarea title="内容" field="json"/>
            </PlTablePro>
        </div>
    </>
})
